<template>
	<view class="popupRule">
		<view class="explain-content">
			<view class="upload">
				<view class="uploadImg" v-if="userUrl" @click="chooseImage">
					<image :src="userUrl" mode=""></image>
				</view>
				<view class="uploadImg" v-else @click="chooseImage">
					<u-icon name="camera-fill" size="60" color="#c0c4cc"></u-icon>
					<text>头像</text>
				</view>
			</view>
			
			<u-input v-model="username" type="text" :clearable="false" placeholder="请输入昵称（不超过8个字）" maxlength="8" border  />
		</view>
		<view class="button-container">
		    <view class="btn-click border-right" @click="close">取消</view>
			<view class="btn-click" @click="uploadUserInfo">确定</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	props: ['avatar', 'nickname'],
	data() {
		return {
			userUrl: null, // 用户头像
			username: null, // 用户姓名
		}
	},
	mounted() {
		this.userUrl = JSON.parse(JSON.stringify(this.userInfo.avatar))
		console.log([this.userUrl])
		this.username = this.userInfo.nickname
	},
	computed: {
		...mapState(['userInfo']),
	},
	methods: {
		uploadUserInfo() {
			if(!this.$u.trim(this.username)) {
				uni.showToast({
				    title: '请输入昵称',
				    icon: 'none',
				    duration: 3000,
				});
				return
			}
			this.$u.post('/wx/setUsersInfo', {
				"avatar": this.userUrl,
				"nickname": this.username
			}).then(res => {
				uni.showToast({
				    title: '更新成功',
				    icon: 'none',
				    duration: 3000,
				});
				this.$emit('getReUserInfo')
				this.close()
				
			})
		},
		close() {
			this.$emit('close')
		},
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 1, //一次可以选择的数量
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册或手机选择
				success: res => {
					let filePath = res.tempFilePaths[0]
					this.select(filePath)
				}
			})
		},
		// 获取上传状态
		select(filePath){
			let _this = this
			console.log(this.imageValue)
			uni.getFileSystemManager().readFile({
				filePath: filePath, //选择图片返回的相对路径
				encoding: 'base64', //编码格式
				success:(res) =>{
					let baseImg = 'data:image/png;base64,' + res.data
					this.$u.post('/public/file/uploadBase64', {
						base64: baseImg,
						fileName: 'spaceHeadeImg'
					}).then(res => {
						this.userUrl = res.url
					})
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../../common/css/var.less");
.explain-content {
	padding: 56rpx 48rpx 0;
	color: #333333;
	
	.upload {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}
	.uploadImg {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 160rpx;
		height: 160rpx;
		border: 2rpx solid #E6E6E6;
		background-color: #F7F7F7;
		border-radius: 50%;
		text {
			padding-top: 4rpx;
			font-size: 24rpx;
			color: #999
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}
.button-container {
	margin-top: 60rpx;
	text-align: center;
	display: flex;
	border-top: 1px solid #E7E7E7;
	.btn-click {
		position: relative;
		width: 50%;
		height: 110rpx;
		line-height: 110rpx;
		background: #fff;
		font-size: 32rpx;
		color: @mColor;
		&.border-right {
			color: @mText;
			border-right: 1px solid #E7E7E7;
		}
	}
}
</style>
